<template>
    <el-col :span="Number(colspan)">
        <el-form-item
                :prop="name"
                :label-width="labelWidth + 'px'"
                :label="label"
                v-show="property.p.indexOf('H') === -1">
            <el-cascader
                    :options="options"
                    :props="props"
                    v-model="selectValue"
                    @active-item-change="activeChange"
                    style="width: 100%;"
                    @visible-change="visibleChange"
                    @change="handleChange">
            </el-cascader>
            <input type="hidden" v-model="property.value"/>
        </el-form-item>
    </el-col>
</template>

<script type="es6">
    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '120'
            },
            label: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            },
            p: {
                type: String,
                default: ''
            },
            type: String,
            maxlength: Number,
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            codetype: {
                type: String,
                default: ""
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            codeTypes() {
                return this.$store.getters.codeTypes;
            }
        },
        watch: {
            'property.value': {
                handler(value) {
                    this.changeValue(value);
                },
                deep: true
            },
            codeTypes: {
                handler(value) {
                    this.options = value[this.codetype];
                },
                deep: true
            }
        },
        data() {
            return {
                options: [],
                list: [],
                selectValue:[],
                props: {
                    value: 'id',
                    label:'value'
                }
            }
        },
        created() {
            // this.$api.commonGet('function/treeText?codetype='+this.codetype).then(res => {
            //     if (res.status === '0') {
            //         if (res.message !== null) {
            //             this.$message.success(res.message);
            //         }
            //         this.options = res.data;
            //     } else if (res.status === '1' && res.message !== null) {
            //         this.$message.warning(res.message);
            //     } else if (res.status === '9' && res.message !== null) {
            //         this.$message.error(res.message);
            //     }
            // });
        },
        methods: {
            /**
             * 改变绑定值
             */
            changeValue(value){
                if(value && value.length>0){
                    this.selectValue = value.split(',');
                    // console.log('this.selectValue',this.selectValue);
                    window.setTimeout(()=>{
                        this.getList(this.selectValue,this.options);
                    },1000)
                }
            },

            /**
             * 点击末级值变化回调
             */
            handleChange(value) {
                this.property.value = value.join(',') || '';
            },
            /**
             * 点击加载下一级
             */
            activeChange(value) {
                // console.log(value)
                this.getList(value,this.options);
            },
            /**
             * 显示options列表
             */
            visibleChange(value) {
            },
            /**
             * 获取列表数据
             */
            getList(currentId,array) {
                // console.log('array',array);
                let key = currentId[0];
                array.map((item,index)=>{
                    if(item.id == key){
                        if(item.children && item.children.length>0){
                            let id = currentId.filter((el,i)=>i!=0);
                            this.getList(id,item.children);
                            return
                        }else{
                            let params ={
                                id:item.id
                            }
                            this.$api.commonGet('function/treeText?codetype='+this.codetype,params).then(res => {
                                if (res.status === '0') {
                                    if (res.message !== null) {
                                        this.$message.success(res.message);
                                    }
                                    item.children = res.data || [];
                                } else if (res.status === '1' && res.message !== null) {
                                    this.$message.warning(res.message);
                                } else if (res.status === '9' && res.message !== null) {
                                    this.$message.error(res.message);
                                }
                            });
                        }
                    }
                })
            },
            /**
             * 点击事件
             */
            onClick() {
                if (!this.isClick) return;
                let obj = {
                    path: this.$route.path + '/doQuery/' + this.name,
                    params: {
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 选择事件
             */
            onChange() {
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-icon-search {
        color: #000;
        cursor: pointer;
    }
    /deep/ .el-cascader {
         line-height: 28px;
    }
</style>
